    var uploader = WebUploader.create({

        // swf文件路径
        swf: 'js/lib/Uploader.swf',

        // 文件接收服务端。
        server: 'server/fileupload.php',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#J_zcd_uploadBtn',
        //      accept: {
        //     title: 'Images',
        //     extensions: 'gif,jpg,jpeg,bmp,png,doc,xls,pdf,rar,zip',
        //     mimeTypes: ''
        // },

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        fileNumLimit: 300,
        fileSizeLimit: 1024 * 1024 * 1024 * 1024 * 1024, // 200 M
        fileSingleSizeLimit: 1024 * 1024 * 1024 * 1024 // 3 M
    });

    var J_zcd_fileList = $("#J_zcd_fileList");
    var J_zcd_uploadBtn = $("#J_zcd_uploadBtn");
    var uploadStart = $(".uploadStart");
    var uploadPause = $(".uploadPause");
    var pt1 = $(".pt1");
    var pt2 = $(".pt2");

    var webuploaderPick = $(".webuploader-pick");
    var cancelAll = $(".cancelAll");
    //var queue = new webuploader.Queue();
    var supportTransition = (function() {
        var s = document.createElement('p').style,
            r = 'transition' in s ||
            'WebkitTransition' in s ||
            'MozTransition' in s ||
            'msTransition' in s ||
            'OTransition' in s;
        s = null;
        return r;
    })();
    //当文件被加入队列以后触发
    uploader.on('fileQueued', function(file) {
        pt1.add(pt2).addClass('hide');
        webuploaderPick.css("margin-top", "-40px").text("继续添加");
        var $li = $('<li id="' + file.id + '" ></li>');
        //console.log(file)
        uploader.makeThumb(file, function(error, ret) {
            if (error) {
                //$li.text('预览错误');
                $li.append('<img src="images/uploadimg/filebg/' + file.ext + '.png" height="85" width="85"/>\
                               <span class="up-opert">\
                                     <i class="up-mask"></i>\
                                     <i class="rotateL"></i>\
                                     <i class="rotateR"></i>\
                                     <i class="del"></i>\
                               </span>\
                               <span class="up-success hide"></span>\
                               <span class="up-error hide">上传失败!</span>\
                               <span class="up-progress"></span>\
                               <span class="up-title">\
                                     <i class="up-mask"></i>\
                                     <i class="up-tit">' + file.name + '</i>\
                               </span>');
            } else {
                $li.append('<img src="' + ret + '" height="85" width="85"/>\
                               <span class="up-opert">\
                                     <i class="up-mask"></i>\
                                     <i class="rotateL"></i>\
                                     <i class="rotateR"></i>\
                                     <i class="del"></i>\
                               </span>\
                               <span class="up-success hide"></span>\
                               <span class="up-error hide">上传失败!</span>\
                               <span class="up-progress"></span>\
                               <span class="up-title">\
                                     <i class="up-mask"></i>\
                                     <i class="up-tit">' + file.name + '</i>\
                               </span>');
            }
            J_zcd_fileList.append($li);
            file.rotation = 0;
        });

        // 点击上传按钮开始上传
        uploadStart.on("click", function() {
            uploader.upload();
        });
        
        // 点击暂停按钮时
        uploadPause.on("click", function() {
            uploader.stop();
        });

        // 当上传开始时触发
        uploader.on("startUpload", function(file) {
            uploadStart.addClass('hide');
            uploadPause.removeClass('hide');
        });

        // 当暂停时触发
        uploader.on("stopUpload", function(file) {
            uploadStart.removeClass('hide');
            uploadPause.addClass('hide');
        });

        // 当时触发
        uploader.on("uploadSuccess", function(file, response) {
            $("#" + file.id).addClass('upload-completed').find(".up-success").removeClass('hide');
        });

        // 当时触发
        uploader.on("uploadError", function(file, response) {
            $("#" + file.id).find(".up-error").removeClass('hide');
        });

        // 当时触发
        uploader.on("uploadProgress", function(file, response) {
            $("#" + file.id).find(".up-progress").stop().fadeIn('600', function() {
                $(this).removeClass('hide').css('width', (response / 1) * 85);
            });
            if (response === 1) {
                $("#" + file.id).find(".up-progress").stop().fadeOut('600', function() {
                    $(this).addClass('hide');
                });
            }
        });

        // 当时触发
        uploader.on("uploadFinished", function(file, response) {
            uploadStart.removeClass('hide');
            uploadPause.addClass('hide');
        });

        J_zcd_fileList.on("mouseover", "li", function() {
            if (!$(this).hasClass('upload-completed')) {
                $(this).find(".up-opert").stop().animate({
                    'top': '0px'
                }, 200);
                $(this).find(".up-title").stop().animate({
                    'bottom': '0px'
                }, 200);
            }
        });

        J_zcd_fileList.on("mouseout", "li", function() {
            if (!$(this).hasClass('upload-completed')) {
                $(this).find(".up-opert").stop().animate({
                    'top': '-20px'
                }, 200);
                $(this).find(".up-title").stop().animate({
                    'bottom': '-20px'
                }, 200);
            }
        });

        J_zcd_fileList.on("click", ".del", function() {
            var _$p = $(this).closest('li');
            _$p.fadeOut('160', function() {
                $(this).remove();
                if (!$("#J_zcd_fileList li").length) {
                    pt1.add(pt2).removeClass('hide');
                    webuploaderPick.css("margin-top", "0px").text("上传文件");
                }
                uploader.removeFile(file);
            });

        });

        cancelAll.on("click", function() {
            $("#J_zcd_fileList li:not(.upload-completed)").remove();
            if (!$("#J_zcd_fileList li").length) {
                pt1.add(pt2).removeClass('hide');
                webuploaderPick.css("margin-top", "0px").text("上传文件");
            }
            uploader.removeFile(file);
        });

        rotate('.rotateL', '+');
        rotate('.rotateR', '-');

        function rotate(obj, chr) {
            J_zcd_fileList.on('click', obj, function() {
                var index = $(this).index(),
                    deg;
                if (chr === "+") {
                    file.rotation += 90;
                } else if (chr === "-") {
                    file.rotation -= 90;
                }

                if (supportTransition) {
                    deg = 'rotate(' + file.rotation + 'deg)';
                    $(this).closest('li').find("img").css({
                        '-webkit-transform': deg,
                        '-mos-transform': deg,
                        '-o-transform': deg,
                        'transform': deg
                    });
                } else {
                    $(this).closest('li').find("img").css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
                    // use jquery animate to rotation
                    // $({
                    //     rotation: rotation
                    // }).animate({
                    //     rotation: file.rotation
                    // }, {
                    //     easing: 'linear',
                    //     step: function( now ) {
                    //         now = now * Math.PI / 180;

                    //         var cos = Math.cos( now ),
                    //             sin = Math.sin( now );

                    //         $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
                    //     }
                    // });
                }
            });
        }

    });
